<template>
	<div class="hello">
		<head-top></head-top>
		<div class="nxb-box">
			<div class="bg-fff pt30 i-banner-box pr">

				<section>
					<div class="i-slide" style="height: 460px;">
						<section class="container">
							<div class="swiper-container swiper-container-horizontal" id="swiper1">
								<div class="swiper-wrapper" style="transform: translate3d(-2250px, 0px, 0px); transition-duration: 0ms;">
									<div class="swiper-slide swiper-slide-duplicate swiper-slide-next swiper-slide-duplicate-prev" style="background: rgb(21, 20, 31); width: 970px;" v-for="item in bannerList" @click='bannerRouter(item)'>
										<a href="javascript:void(0)" target="">
											<img class="imgload" v-lazy="domain + item.imageUrl" alt="">
										</a>
									</div>

								</div>
								
								<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
							</div>
							<div class="swiper-pagination">
								<!--<span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button" aria-label="Go to slide 1"></span>
								<span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 2"></span>-->
							</div>

						</section>
					</div>

					<div class="i-hot-course i-mod-box of">
						<article class="container">
							<div class="clearfix">
								<section class="">
									<div class="comm-title of">
										<h2 class="tac"> 
											<span class="c-333">热门课程</span> 
											<img class="nav-iocn" src="../../../static/image/nav-icon.png">
										</h2> 
									</div>
									<div class="">
										<div class="net-cou-box">
											<ul class="of job-cou-list">
												<li v-for="item in hotCourse">
													<div class="cc-l-wrap">
														<a class="course-img" :title="item.name" href="javascript:void(0)" @click="routerInfo(item.id)">
															<img  v-lazy="domain + item.image" class="img-responsive">
															<div class="course-label">
																<label title="视频" v-if="item.type == 'COURSE'"><em class="icon16 video-icon"></em></label>
																<label title="音频" v-else><em class="icon16 audio-icon"></em></label>
															</div>
														</a>
														<div class="j-c-desc-wrap">
															<section class="j-c-title">
																<h3 class="pt10"> <a class="j-course-title" :title="item.name">{{item.name}}</a> </h3> </section>
															<div class="cj-cou-time mt5 fsize12 hLh20 clearfix">
																<div class="c-999 fl" style="width: 100%;"> <span class="fsize12 vam fl">时长  {{item.minutes}}分钟</span> <span class="ml15 vam pc-box-show fr"><em class="icon12 person-icon"></em><span class="fsize12 vam ml2">{{item.lessonNum}}人学过</span></span>
																</div>
															</div>
														</div>
													</div>
												</li>

											</ul>
										</div>
									</div>
								</section>
							</div>
						</article>
					</div>

					<div class="i-new-course i-mod-box of" style="width: 100%;">
						<article class="container">
							<div class="clearfix">
								<section class="">
									<div class="comm-title of">
										<h2 class="tac"> 
											<span class="c-333">最新课程</span> 
											<img class="nav-iocn" src="../../../static/image/nav-icon.png">
										</h2> 
									</div>
									<div class="">
										<div class="net-cou-box">
											<ul class="of job-cou-list">
												<li v-for="item in latestCourse">
													<div class="cc-l-wrap">
														<a class="course-img" :title="item.name" href="javascript:void(0)" @click="routerInfo(item.id)"> 
															<img v-lazy="domain + item.image" class="img-responsive">
															<div class="course-label">
																<label title="视频" v-if="item.type == 'COURSE'"><em class="icon16 video-icon"></em></label>
																<label title="音频" v-else><em class="icon16 audio-icon"></em></label>
															</div>
														</a>
														<div class="j-c-desc-wrap">
															<section class="j-c-title">
																<h3 class="pt10"> <a class="j-course-title" :title="item.name">{{item.name}}</a> </h3> </section>
															<div class="cj-cou-time mt5 fsize12 hLh20 clearfix">
																<div class="c-999 fl"> <span class="fsize12 vam">时长  {{item.minutes}}分钟</span> <span class="ml15 vam pc-box-show"><!--<em class="icon12 person-icon"></em>--><span class="fsize12 vam ml2">学习人数  {{item.lessonNum}}人</span></span>
																</div>
															</div>
														</div>
													</div>
												</li>

											</ul>
										</div>
									</div>
								</section>
							</div>
						</article>
					</div>

					<div class=" of i-mod-box bg-fff">
						<article class="container">
							<div class="clearfix">
								<section class="">
									<header class="comm-title of tac">
										<h2 class="tac"> 
											<span class="c-333">新闻资讯</span> 
											<img class="nav-iocn" src="../../../static/image/nav-icon.png">
										</h2> 
									</header>
									<div class="mb20">
										<ul class="clearfix of com-dynamic-list">
											<li class="c-d-firstli" :title="firstArticle.name">
												<div class="c-d-l-wrap pr">
													<div class="c-d-l-desc">
														<div class="c-d-l-dbox">
															<section class="hLh30 of txtOf">
																<a class="fsize14 c-fff" :title="firstArticle.name" href="javascript:void(0)" @click="routerArticleInfo(firstArticle)">{{firstArticle.name}}</a>
															</section>

														</div>
													</div>
													<a class="c-d-l-pic" href="javascript:void(0)" @click="routerArticleInfo(firstArticle)"> 
														<img v-lazy="domain + firstArticle.image" alt=""> 
													</a>
												</div>
											</li>
											<li v-for="item in articleList" :title="item.name">
												<div class="c-d-l-wrap pr">
													<div class="c-d-l-desc">
														<div class="c-d-l-dbox">
															<section class="hLh30 of txtOf">
																<a class="fsize14 c-fff" :title="item.name" href="javascript:void(0)" @click="routerArticleInfo(item)">{{item.name}}</a>
															</section>
														</div>
													</div>
													<a class="c-d-l-pic" href="javascript:void(0)" @click="routerArticleInfo(item)"> 
														<img v-lazy="domain + item.image" alt=""> 
													</a>
												</div>
											</li>

										</ul>
									</div>
								</section>
							</div>
						</article>
					</div>
					<div class="container school-contain">
						<header class="comm-title of tac">
							<h2 class="tac"> 
								<span class="c-333">学校特色</span> 
								<img class="nav-iocn" src="../../../static/image/nav-icon.png">
							</h2> 
						</header>
						<div class="img-conatin">
							<img src="../../../static/image/school-characteristic.png"/>
						</div>
					</div>
				</section>
			</div>
		</div>
		<foot-bootom></foot-bootom>
	</div>
</template>

<script>
	import Swiper from 'swiper';
	import 'swiper/dist/css/swiper.min.css'
	import { domainUrl } from '@/utils/index'
	import { getIndexData } from '@/api/home'
	import headTop from '@/components/header/header'
	import footBootom from '@/components/footer/index'
	export default {
		name: 'home',
		components: { //引入组件
			headTop,
			footBootom,

		},
		data() {
			return {
				domain: "",
				bannerList: [{//banner图列表里面默认值 防止留白问题
					id: 2,
					imageUrl: "/upload/image/banner/1535940034297.jpg",
					linkId: 10,
					linkType: "COURSE",
					linkUrl: "",
					name: "banner4",
					sort: 1,
					status: true
				}],
				latestCourse: [],
				articleList: [],
				hotCourse: [],
				firstArticle: {}
			}
		},
		computed: {
			userInfo() {
				return this.$store.getters.getStorageInfo;
			}
		},
		created() {

			this.domain = domainUrl();

		},
		mounted() {
			this.getIndexData();
		},
		methods: {

			getIndexData() {
				getIndexData().then((res) => {
					let data = res.entity;
					let bannerList = data.bannerList;
					this.bannerList = bannerList;
					this.articleList = data.articleList.slice(1);;
					this.latestCourse = data.latestCourse;
					this.hotCourse = data.hotCourse;
					this.firstArticle = data.articleList[0];
					var mySwiper = new Swiper('.swiper-container', {
						loop: false,
						observer: true,
						observeParents: true,
						autoplay:1500,
						pagination: '.swiper-pagination',
						paginationClickable :true,

					});

				});
			},
			routerInfo(id) {
				this.$router.push({
					path: '/courseInfo',
					query: {
						id: id,
						type: 'COURSE'
					}
				})

			},
			routerArticleInfo(val) { //跳转详情
				this.$router.push({
					path: '/articleInfo',
					query: {
						id: val.id
					}
				});

			},
			bannerRouter(val) { //banner图跳转
				switch(val.linkType) {
					case 'COURSE':
						this.$router.push({
							path: '/courseInfo',
							query: {
								id: val.linkId,
								type:'COURSE'
							}
						});
						break;
					case 'ARTICLE':
						this.$router.push({
							path: '/articleInfo',
							query: {
								id: val.linkId
							}
						});
						break;
					case 'URL':
						 window.location.href = val.linkUrl;
					default:
						break;
				}
			}
		}
	}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import '../../assets/style/mixin';
.comm-title{
    clear: both;
    overflow: hidden;
	padding: 70px 0 50px;
	h2{
		span{
			font-size: 26px;
		}
		.nav-iocn{
			@include wh(100%,auto);
		}
	}
}

.i-new-course{
	background: url(../../../static/image/new-course.png) no-repeat;
	span,a{
		color: #f2f2f2;
	}
	.comm-title{
		h2{
			span{
				color: #fff;
			}
		}
	}
}

.school-contain{
	.img-conatin{
		margin-bottom: 60px;
		
	}
}


.i-slide .swiper-slide img{
	@include wh(1200px,460px);
}

.i-slide .swiper-pagination, .course-slide .pagination {
    position: absolute;
    left: 0;
    text-align: center;
    bottom: 10px;
    width: 100%;
    z-index: 9;
}

.board-box {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 100%;
    .container {
	    position: relative;
	    height: 100%;
	  }
}



.i-banner-box .i-slide {
	margin: 0 auto;
	@include wh(1200px,460px);
    border-radius: 7px;
    
}

.i-slide {
    width: 100%;
    overflow: hidden;
    position: relative;
    
		
}




.i-banner-box .i-slide .swiper-slide {border-radius: 7px; overflow: hidden;}
@import '../article/article';
</style>